<template>
  <div class="item_list">
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="getGoodsList"
    >
      <van-card
        v-for="(item, i) in goodsList"
        :key="i"
        :desc="item.subTitle"
        :title="item.name"
        :thumb="item.headPic"
        :price="item.price"
        :origin-price="item.price"
        @click="itemClick(item.id)"
      />
    </van-list>
  </div>
</template>

<script>
import goodsIMG from './test_goodType.png';
import { goodsCategory, goodsList } from '@/api/api';
import { Card, List, Tab, Tabs } from 'vant';

export default {
  name: 'Item-list',
  props: {
    catalog: {
      type: [String, Number],
      default: ''
    }
  },

  data() {
    return {
      goodsList: [
        // {
        //   id: 1,
        //   description: 'desc',
        //   name: 'title',
        //   headPic: goodsIMG,
        //   price: 200
        // }
      ],
      page: 0,
      limit: 10,
      loading: false,
      finished: false
    };
  },

  created() {
    this.init(categoryId);
  },

  methods: {
    init(categoryId) {
      this.page = 0;
      this.finished = false;
      this.getGoodsList(categoryId); // 初始化数据
    },
    getGoodsList(categoryId) {
      const  This=this;
      this.loading = true;
      this.page++;
      if(!categoryId||categoryId==""){
        this.loading = false;
        return false;
      }
      goodsList({
        categoryId: categoryId,
        pageNo: this.page,
        pageSize: this.limit
      }).then(res => {
        this.loading = false;
        this.finished=true;
        This.goodsList=[];
        This.goodsList.push(...res.data.result.records);
      });
    },
    itemClick(id) {
      this.$router.push(`/items/detail/${id}`);
    }
  },

  components: {
    [List.name]: List,
    [Card.name]: Card
  }
};
</script>

<style lang="scss" scoped>
.item_list {
  background-color: #fff;
}

.h {
  height: 100px;
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.h .name {
  display: block;
  height: 30px;
  margin-bottom: 10px;
  font-size: 20px;
  color: #333;
}

.h .desc {
  display: block;
  height: 24px;
  font-size: 16px;
  color: #999;
}
</style>
